.m-slider {
  position: relative;
  border-radius: 999px;
  background-color: #e5e5e5;

  &.m-slider--disabled {
    opacity: .7;
  }

  &:before {
    position: absolute;
    right: 0;
    left: 0;
    content: "";
    top: -8px;
    bottom: -8px;
  }

  .m-slider__bar {
    position: relative;
    border-radius: inherit;
    transition: width .2s;
    background-color: var(--color-primary, #409EFF);

    .m-slider__button-wrap {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate3d(50%, -50%, 0);

      .m-slider__button {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
        background-color: #fff;
      }
    }
  }
}